<div ng-controller="SecurityRuleCtrl">
  <div class="row-fluid">
    <div class="span10">
      <div class="btn-toolbar server-btn-toolbar ui-toolbar">
        <button type="button" class="btn btn-mini" ng-click="do_add()">添加</button>
        <button type="button" class="btn btn-mini" ng-click="do_edit()">修改</button>
        <button type="button" class="btn btn-danger btn-mini" ng-click="do_delete()">删除</button>
      </div>
    </div>
    <div class="span2">
      <span>每页显示</span>
      <select class="input-mini" ng-model="page_size" ng-options="pz for pz in page_sizes" ng-change="change(page_size)">
      </select>
      <span>条</span> 
    </div>
  </div>
  <table class="table table-striped table-bordered table-condensed">
    <thead>
      <tr>
        <th><input type="checkbox" ng-model="selected_all" /></th>
        <th>协议</th>
        <th>优先级</th>
        <th>数据流向</th>
        <th>起始IP</th>
        <th>终止IP</th>
        <th>起始端口</th>
        <th>终止端口</th>
        <th>所属安全组</th>
      </tr>
    </thead>
    <tbody>
      <tr selectable="security" ng-repeat="security in security_rules">
        <td><input type="checkbox" value="{{security.id}}" ng-model="selected[security.id]" /></td>
        <td>{{security.protocol}}</td>
        <td>{{security.priority}}</td>
        <td>{{security | security_direction}}</td>
        <td>{{security.dstipfrom}}</td>
        <td>{{security.dstipto}}</td>
        <td>{{security.dstportstart}}</td>
        <td>{{security.dstportend}}</td>
        <td>{{security.group.name}}</td>
      </tr>
    </tbody>
  </table>
  <div class="pagination">
    <ul>
      <li ng-hide="should_hide()" ng-class="prev_class" ng-click="prev()"><a href="javascript:void(0);">上一页</a></li>
      <li ng-repeat="i in [] | range:page_count()" ng-hide="should_hide()" ng-click="page(i)" ng-class="(i == current_page) && 'active'">
        <a href="javascript:void(0)">{{i + 1}}</a>
      </li>
      <li ng-hide="should_hide()" ng-class="next_class" ng-click="next()"><a href="javascript:void(0);">下一页</a></li>
    </ul>
  </div>
</div>